<template>
    <div>
        <el-row :gutter="10">
                <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content"></div></el-col>
                <el-col :xs="4" :sm="9" :md="11" :lg="12" :xl="14">
                    <div class="grid-content " style="border-bottom: 1px solid #d0d0d0;">

                        <!-- 第一行 -->
                        <el-row :gutter="10" style="margin:2% 2% 2% 2%;border-bottom: 1px solid #d0d0d0;">
                            <el-col :xs="4" :sm="9" :md="11" :lg="12" :xl="14">
                                <div class="grid-content " >
                                    <p style="font-size:20px;">手记</p>
                                </div>
                            </el-col>
                        </el-row>


                        
                        <el-row :gutter="10" style="margin:5% 0% 5% 2%;border-bottom: 1px solid #d0d0d0;max-height:150px;">
                            <el-col :xs="4" :sm="9" :md="11" :lg="12" :xl="14" >
                                <div class="grid-content " >
                                    <div>
                                        <img src="~/assets/img/404.jpg" style="width:250px;height:150px;margin: 2% 2% 2% 2%;float:left;">
                                        <div style="float:left;">
                                            <p style="font-size:25px;margin:15% 0 0 0;">标题</P>
                                            <p>文字</p>
                                            <div style="bottom:0px;">
                                             <p >1</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>

                        <el-row :gutter="10" style="margin:5% 0% 5% 2%;border-bottom: 1px solid #d0d0d0;max-height:150px;">
                            <el-col :xs="4" :sm="9" :md="11" :lg="12" :xl="14" >
                                <div class="grid-content " >
                                    <div>
                                        <img src="~/assets/img/404.jpg" style="width:250px;height:150px;margin: 2% 2% 2% 2%;float:left;">
                                        <div style="float:left;">
                                            <p style="font-size:25px;margin:15% 0 0 0;">标题2</P>
                                            <p>文字</p>
                                            <div style="bottom:0px;">
                                             <p >1</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>

                        <el-row :gutter="10" style="margin:5% 0% 5% 2%;border-bottom: 1px solid #d0d0d0;max-height:150px;">
                            <el-col :xs="4" :sm="9" :md="11" :lg="12" :xl="14" >
                                <div class="grid-content " >
                                    <div>
                                        <img src="~/assets/img/404.jpg" style="width:250px;height:150px;margin: 2% 2% 2% 2%;float:left;">
                                        <div style="float:left;">
                                            <p style="font-size:25px;margin:15% 0 0 0;">标题3</P>
                                            <p>文字</p>
                                            <div style="bottom:0px;">
                                             <p >1</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
                <el-col :xs="4" :sm="3" :md="5" :lg="6" :xl="8">
                    <div class="grid-content " style="border-bottom: 1px solid #d0d0d0;">
                        <!-- 第一行 -->
                        <el-row :gutter="10" style="margin:2% 2% 2% 2%;">
                                <div class="grid-content ">
                                    <p style="font-size:20px;font-family:Arial;">手记排行</p>
                                </div>
                        </el-row>
                    </div>

                </el-col>
                <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content"></div></el-col>
            

<!-- 
            <el-row :gutter="10" style="margin:2% 2% 2% 2%;">
                <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content"></div></el-col>
                <el-col :xs="4" :sm="9" :md="11" :lg="12" :xl="14" style="border-bottom: 1px solid #d0d0d0;">
                    <div class="grid-content " >
                        <div>
                            <img src="~/assets/img/404.jpg" style="width:250px;height:150px;margin: 2% 2% 2% 2%;float:left;">
                            <div style="float:left;">
                                <p style="font-size:25px;margin:15% 0 0 0;">标题</P>
                                <p>文字</p>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="4" :sm="3" :md="5" :lg="6" :xl="8"><div class="grid-content " style="border-bottom: 1px solid #d0d0d0;"><p style="font-size:20px;">文章排行</p></div></el-col>
                <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content"></div></el-col>
            </el-row>

            <el-row :gutter="10" style="margin:2% 2% 2% 2%;">
                <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content"></div></el-col>
                <el-col :xs="4" :sm="9" :md="11" :lg="12" :xl="14" style="border-bottom: 1px solid #d0d0d0;">
                    <div class="grid-content " >
                        <div>
                            <img src="~/assets/img/404.jpg" style="width:250px;height:150px;margin: 2% 2% 2% 2%;float:left;">
                            <div style="float:left;">
                                <p style="font-size:25px;margin:15% 0 0 0;">标题</P>
                                <p>文字</p>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="4" :sm="3" :md="5" :lg="6" :xl="8"><div class="grid-content " style="border-bottom: 1px solid #d0d0d0;"><p style="font-size:20px;">文章排行</p></div></el-col>
                <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content"></div></el-col>
            </el-row>    -->

        </el-row>

        
    </div>
</template>

<style>
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  body > .el-container {
    margin-bottom: 40px;
  }
</style>